<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/alllayui/layui/css/layui.css}"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-form searchTable">
  入住开始时间：
  <div class="layui-inline">
    <div class="layui-input-inline">
      <input type="text" name="publishTimeStart" id="publishTimeStart" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input datePicker">
    </div>
  </div>
  入住结束时间：
  <div class="layui-inline">
    <div class="layui-input-inline">
      <input type="text" name="publishTimeEnd" id="publishTimeEnd" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input datePicker">
    </div>
  </div>
  房间标准：
  <div class="layui-input-inline">
    <select name="nstate" id="nstate" >
      <option value="">请选择房间标准</option>
      <option value="0">标间</option>
      <option value="1">大床房</option>
      <option value="2">豪华套房</option>
    </select>
  </div>

  <button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="Room" lay-filter="Room"></table>

<script type="text/html" id="toolbarDemo">
</script>

<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">预订</button>
  </div>
</script>


<script th:src="@{/alllayui/layui/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
  layui.use(['jquery','table','form','laydate'], function(){
    var table = layui.table;
    var form = layui.form
            ,layer = layui.layer
            ,$ = layui.$ ;
    var laydate = layui.laydate;

    table.render({
      elem: '#Room'
      ,url:'/roomadvance/list'
      ,method: 'post'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,title: 'Room'
      ,cols: [
        [
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'rno', title:'房间号',  align:'center' }
          ,{field: 'fno', title:'楼层',  align:'center'}
          ,{field: 'standard', title:'房间标准',  align:'center' }
          ,{field: 'cost', title:'价格',  align:'center' }
          ,{field: 'position', title:'位置',  align:'center' }
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]
      ]
      ,page: true
      ,request: {
        pageName: 'currentPageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
      }
      ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": "", //解析提示文本
          "count": res.totalRecords, //解析数据长度
          "data": res.recordList //解析数据列表
        };
      }

    });


    //同时绑定多个
    lay('.datePicker').each(function(){
      laydate.render({
        elem: this
        ,trigger: 'click'
        ,type: 'datetime'
      });
    });

    var $ = layui.$, active = {
      reload: function(){
        var publishTimeStart  = $('#publishTimeStart');
        var publishTimeEnd = $('#publishTimeEnd');
        var roomType;
        if($('#nstate').val() === "0"){
          roomType = '标间';
        }else if($('#nstate').val() === "1"){
          roomType = '大床房';
        }else if($('#nstate').val() === "2"){
          roomType = '豪华套房';
        }

        var queryWhere = {};
        if(publishTimeStart.val()!=""  && publishTimeEnd.val()!="" ){
          queryWhere['btime'] = publishTimeStart.val();
          queryWhere['etime'] = publishTimeEnd.val();
        }
        if(roomType!=""){
          queryWhere['standard'] = roomType;
        }
        //执行重载
        table.reload('Room', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          , method: 'POST'
          ,where: queryWhere
          ,done: function(res, curr, count){
            this.where = {};
          }
        }, 'data');
      }
    };



    $('.searchTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });


    //监听行工具事件
    table.on('tool(Room)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'add'){
        var addIndex = layer.open({
          type: 2,
          area: ['700px', '450px'],
          fixed: false, //不固定
          maxmin: true,
          content: '/roomadvance/add?rno=' + data.rno
        });
      }
    });

  });


</script>

</body>
</html>